<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="./js/idcode/css/jquery.idcode.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/idcode/js/jquery.idcode.js"></script>
    <script src="./js/jquery-validation/jquery.validate.js"></script>
    <script src="./js/jquery-validation/additional-methods.js"></script>
    <script src="./js/layer/layer.js"></script>
</head>

<body>
    <header>
        <div class="he-t">
            <div class="he-tLe">
                <a href=""><img src="./images/logo.gif" alt=""></a>
            </div>
            <p>
                <span>|</span>
                <span>欢迎注册</span>
            </p>
        </div>
    </header>

    <section>
        <div class="zc">
            <form action="">
                <p>
                    <span>用户名</span>
                    <input type="text" placeholder="用户名" name="useName">
                </p>

                <p>
                    <span>email</span>
                    <input type="text" placeholder="email" name="useEmaill">
                </p>

                <p>
                    <span>密码</span>
                    <input type="password" placeholder="密码" name="usePwd" id="upwd">
                </p>

                <p>
                    <span>确认密码</span>
                    <input type="password" placeholder="确认密码" name="usePwd2">
                </p>

                <p>
                    <span>手机</span>
                    <input type="text" placeholder="手机" name="useTelphone">
                </p>

                <p>
                    <span>验证码</span>
                    <input type="text" placeholder="验证码" id="Txtidcode" class="txtVerification"><span
                        id="idcode"></span>
                </p>
                <div class="js">
                    <input type="checkbox">我已看过并接受《 <a href="">用户协议</a>》
                </div>
                <div class="zcb">
                    <button>注册</button>
                </div>
            </form>

        </div>
    </section>

    <footer>
        <div class="foo-fl">
            <p>浙ICP备14001577号-1</p>
            <p>© 2005-2019 跨境淘 版权所有，并保留所有权利</p>
        </div>
    </footer>
</body>

<script>
    $(function () {
        $.idcode.setCode(); //加载生成二维码;

        //自己定义的检测用户的规则
        $.validator.addMethod("checkedUser", function (val) {
            //字母开头不能是数字开头
            return /^[a-z]\w{5,17}$/i.test(val)
        })
        $("form").validate({
            //rules 规则
            rules: {
                useName: {
                    required: true, //必填
                    checkedUser: true//自己定义的方法
                },
                useEmaill: {
                    email: true
                },
                usePwd: {
                    required: true,
                    rangelength: [3, 16]
                },
                usePwd2: {
                    equalTo: "#upwd"  //当前框要与指定的框,的内容一致               
                },
                useTelphone: {
                    digits: true,
                    rangelength: [11, 11]
                }
            },
            //messages 规则是否合法 问题提示
            messages: {
                useName: {
                    required: "用户名必填", //必填
                    checkedUser: "用户名必须字母开头,6-18位" //自己定义的方法
                },
                useEmaill: {
                    email: "您的邮箱格式不合法"
                },
                usePwd: {
                    required: "密码必填",
                    rangelength: "密码长度必须是{0}-{1}"
                },
                usePwd2: {
                    equalTo: "2次密码不一致哦"  //当前框要与指定的框,的内容一致               
                },
                useTelphone: {
                    digits: "手机号,必须是数字",
                    rangelength: "手机号,必须是11位"
                }
            },
            //submitHandler 提交
            submitHandler: function () {
                //   //验证码通过了后,才能发送ajax
                var IsBy=$.idcode.validateCode()
                if(!IsBy){
                    return false;                   
                }
                //准备参数,通过ajax发送服务器上
                $.ajax({
                    url: "./../server/register.php",
                    type: "post",
                    data: $("form").serialize(),
                    dataType: "json"
                }).then(function (res) {
                    //   layer.msg(res.msg);
                    var showIcom = res.status == 1 ? 1 : -3;
                    layer.confirm(res.msg,
                        {
                            icon: showIcom,
                            title: "登录提示",
                            btn: ['确定', '取消']
                        }, function () {
                            if (res.status == 1) {
                                location = "./login.html";
                            } else {
                                location="./register.html";
                            }
                        })
                })
                return false;
            }
        })
    })
</script>

</html>